<template>
  <div class="pack">
    <div class="card-cotnant">
      <div class="card">
        <div class="title">我的钱包余额（元）</div>
        <div class="money-contant">{{getPersonInfo.all_balance}}</div>
        <div class="bottom-contant">
          <div class="small-contant">
            <div class="text">充值余额</div>
            <div class="number">{{getPersonInfo.balance}}</div>
          </div>
          <div class="small-contant">
            <div class="text">赠送余额</div>
            <div class="number">{{getPersonInfo.extra_balance}}</div>
          </div>
          <div class="button-contant" @click="jumpClick('/Water')">
            <div class="button">账单明细</div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-contant">
      <div class="text">选择充值的金额</div>
      <div class="select-contant">
        <div
          class="item-contant"
          v-for="(item,index) in moneyArr"
          :key="index"
          @click="changeNum(index)"
        >
          <div class="item-box">
            <img :src="gou" v-show="item.cheack">
            <div :class="item.cheack?'text-highLight':'text'">{{item.price}}元</div>
            <div class="back" v-if="item.extra!=0">返{{item.extra}}</div>
          </div>
        </div>
      </div>
      <div class="type-contant">
        <div class="title">支付方式</div>
        <div class="space-line"></div>
        <div class="pay-row" @click="changePayType('weChat')">
          <img :src="weChat" alt>
          <div class="text">微信支付</div>
          <div class="check-box">
            <img :src="gou" v-show="payType == 'weChat'">
          </div>
        </div>
        <!-- <div class="pay-row" @click="changePayType('alipay')">
          <img :src="alipay" alt>
          <div class="text">支付宝支付</div>
          <div class="check-box">
            <img :src="gou" v-show="payType == 'alipay'">
          </div>
        </div>-->
      </div>
      <div class="button" @click="recharge">开始充值</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
  name: "Pack",
  data() {
    return {
      weChat: require("../../assets/Pay/wechat.png"),
      alipay: require("../../assets/Pay/alipay.png"),
      gou: require("../../assets/public/gou.png"),
      payType: "weChat",
      moneyArr: [
        {
          extra: 0,
          price: 5
        }
      ],
      index: 0 //所选index
    };
  },
  created() {
    this.change(false);
    // 获取信息
    this.getList();
  },
  computed: {
    ...mapGetters("Person", ["getPersonInfo"])
  },
  methods: {
    ...mapActions("Home", ["change"]),
    jumpClick(path) {
      this.$router.push({
        path: path
      });
    },
    changeNum(index) {
      this.index = index;
      for (let i in this.moneyArr) {
        this.moneyArr[i].cheack = false;
      }
      this.moneyArr[index].cheack = true;
      this.$forceUpdate();
    },
    changePayType(type) {
      this.payType = type;
    },
    // 获取充值规格
    getList() {
      this.$dialog.loading.open("正在加载");
      this.$http
        .get(
          "/credit/Ruleslist",
          {
            params: {
              page: 1,
              status: this.status
            }
          }
        )
        .then(res => {
          console.log(res.data.data);
          this.moneyArr = res.data.data;
          this.changeNum(0);
          this.$dialog.loading.close();
        });
    },
    //充值
    recharge() {
      this.$dialog.loading.open("正在加载");
      this.$http
        .post(
          "/order/Creditcreate",
          {
            price: this.moneyArr[this.index].price,
            extra: this.moneyArr[this.index].extra
          }
        )
        .then(res => {
          window.location.href = res.data.data.wechat_url;
          this.$dialog.loading.close();
        });
    }
  },
  components: {}
};
</script>
